import React, { useCallback, useEffect } from 'react'
import $axios from '@/plugins/request'
import { withRouter } from 'react-router';
import ReactDOM from 'react-router-dom'
import PropTypes from "prop-types";
import { useState } from 'react';
import { withUser } from '@/plugins/hoc'
import moment from 'moment';
import {
  Form,
  Input,
  Button,
  Select,
  message,
  DatePicker, Space, InputNumber, Card
} from 'antd';
const { Option } = Select
const { RangePicker } = DatePicker;

function UserForm({ history, data }) {
  const [children, setChildren] = useState([]);
  const [form] = Form.useForm()
  const isEdit = !!data
  const rules = ({
    fullname: [
      {
        required: true,
        message: '请输入姓名',
        trigger: ["onBlur"]
      },
      {
        pattern: new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/),
        message: '请输入正确的姓名',
        trigger: ["onBlur"]
      }],
    age: [
      {
        required: true,
        message: '请输入年龄',
      },
      {
        pattern: new RegExp(/^[0-9]{1,3}$/),
        message: '请输入正确的年龄',
        trigger: ["onBlur"]
      }
    ],
    branch: [
      {
        required: true,
        message: '请输入所属分支',
        trigger: "onBlur"
      },
      {
        pattern: new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/),
        message: '请输入正确的分支',
        trigger: ["onBlur"]
      }
    ],
  })
  const onFinish = useCallback(async ({ _id, ...values }) => {
    if (isEdit) {
      const { data } = await $axios.put("/api/party/" + _id, values)
      console.log("data", data);
      if (data.code == 1) {
        return message.success("党员信息修改成功")
      }
    } else {
      const { data } = await $axios.post('/api/party/0', {
        ...values
      })
      if (data.code == 1) {
        message.success("党员信息添加成功")
        history.push('/manage/dangyuan/list')
      } else {
        message.warning(data.msg)
      }
    }
  }, [])

  const getbranch = useCallback(async () => {
    const { data } = await $axios.get("/api/branch/findAll")
    // console.log(data.data.list);
    setChildren(data.data.list)
  }, [])
  useEffect(() => {
    getbranch()
  }, [])
  // const onChange=useCallback(()=>{
  //   let values=form.getFieldsValue()
  //   changeSubmitData(values, 'editData')
  // })
  //编辑
  setTimeout(() => {
    if (isEdit) {
      data.join_time = data?.join_time ? moment(data?.join_time) : null
      data.zz_time = data?.zz_time ? moment(data?.zz_time) : null
      form.setFieldsValue(data)
    }
  })
  const handleChange = useCallback((value) => {
    // console.log(value);
  })
  return (
    <Card title="党员信息操作" style={{ width: 600, marginLeft: 100 }}>
      <Form
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
        form={form}
        onFinish={onFinish}
        style={{ width: 450 }}
      >
        <Form.Item label="_id" name="_id" hidden>
          <Input />
        </Form.Item>
        <Form.Item label="党员姓名" name="fullname" rules={rules.fullname}>
          <Input />
        </Form.Item>
        <Form.Item
          label="年龄"
          name="age"
          rules={rules.age}
        >
          <InputNumber min={18} max={200} initialvalues={20} />
        </Form.Item>

        <Form.Item label="所属分支" name="branch" rules={rules.branch} >
          <Select
            allowClear
            style={{ width: '100%' }}
            onChange={handleChange}
          >
            {children.map((item) => {
              return <Option key={item._id} value={item.branch}>{item.branch}</Option>
            })}
          </Select>
        </Form.Item>
        <Form.Item label="申请加入时间" name="join_time">
          <DatePicker
            format="YYYY-MM-DD HH:mm:ss"
            // disabledDate={disabledDate}
            // disabledTime={disabledDateTime}
            showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
          />
        </Form.Item>
        <Form.Item label="转正时间" name="zz_time">
          <DatePicker
            format="YYYY-MM-DD HH:mm:ss"
            showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
          />
        </Form.Item>
        <Form.Item wrapperCol={{
          offset: 8,
        }}>
          <Button type="primary" htmlType="submit" style={{ marginRight: 15 }} >
            提交
          </Button>
          <Button type="primary" onClick={() => {
            history.goBack();
          }}>
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>

  )
}

UserForm = withUser(UserForm)
UserForm = withRouter(UserForm)
export default UserForm